js 读取本地文件与下载数据到本地

最近做了个小功能，需要读取本地的 json 文件数据，在页面经过修改、编辑过后，还要能够导出到本地，页面就是一个数据的处理器。查了一些资料，做一个记录。

使用 `FileReader` 实现读取本地文件

首先需要我们获取本地文件：

const ipt = document.createElement('input')
ipt.type = 'file'
ipt.style.display = 'none'
document.body.appendChild(ipt)
ipt.click()

使用浏览器选择本地文件是一个很简单的操作，关键是对选取后的文件进行文件的读取的问题，需要能够读取文件内的内容。

在这个过程中，使用到了 FileReader 方法，该方法能够允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。配合前面获取到的文件就能够读取文件中的内容了。

ipt.onchange = () => {
    const files = ipt.files[0]
    const reader = new FileReader()
    reader.readAsText(files)
    reader.onload = () => {
        const res = JSON.parse(reader.result)
        console.log(res)
    }
}

使用 `Bolb` 实现存储数据到本地

实现方式为使用 Bolb 方法。

在官方文档中，我们看到一个示例,讲一个数组数据生成一个 bolb 类型的 URL:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它，比如用在img.src上。

按照这个示例，利用生成的 URL 然后使用 a 标签就能够实现将数据下载到本地：

const eleLink = document.createElement('a')
eleLink.download = '统计数据.json'
eleLink.style.display = 'none'
// 字符内容转变成blob地址
const blob = new Blob(
    [JSON.stringify({
        gift: this.state.gift,
        user: this.state.user,
        days: this.state.days,
        channel: this.state.channel,
    })],
    {type: "text/plain;charset=utf-8"}
)
eleLink.href = URL.createObjectURL(blob)
eleLink.click()

使用 FileReader 实现读取本地文件

使用 Bolb 实现存储数据到本地

使用 `FileReader` 实现读取本地文件

使用 `Bolb` 实现存储数据到本地